import React, { Component } from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入柱状图
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import { Feedback } from '@icedesign/base'
import axios from 'axios'

const Toast = Feedback.toast

export default class Line extends Component {
  constructor (props) {
    super(props)
    this.state = {
      option: {
        color: ['#c6e4ff'],
        tooltip: {trigger: 'axis', axisPointer: {type: 'cross', label: {backgroundColor: '#6a7985'}}},
        grid: {left: '0%', right: '10px', bottom: '5%', containLabel: true},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          show: false,
          data: []
        },
        yAxis: {type: 'value', show: false},
        series: {
          name: '接口数',
          type: 'line',
          stack: '总量',
          smooth: true,
          areaStyle: {normal: {}},
          data: []
        }
      }
    }
  }

  componentDidMount () {
    axios
      .post('/api/getWeekGroup')
      .then((response) => {
        this.state.option.xAxis.data = response.data.xAxis
        this.state.option.series.data = response.data.series
        this.setState({option: this.state.option})
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('line'))
        // 绘制图表
        myChart.setOption(this.state.option)
      })
      .catch((error) => {
        Toast.error(error.msg == undefined ? '系统错误' : error.msg)
      })
  }

  render () {
    return (
      <div id="line" style={{width: 375, height: 250}}></div>
    )
  }
}